<template>
	<view class="banner">
		<swiper class="wrapper" indicator-dots indicator-active-color="#fff" autoplay circular>
			<swiper-item class="bannerItem" v-for="item of swiperItemUrl" :key="item._id">
				<image class="bannerImg" :src="item.picurl" mode="aspectFill" lazy-load></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		getIndexBannerApi
	} from '@/Api/index/indexLayOut.js'
	
	import {
		ref
	} from 'vue'

	//定义轮播图图片Url
	const swiperItemUrl = ref([])

	//获取轮播图图片Url
	async function getIndexBanner() {
		const res = await getIndexBannerApi()
		swiperItemUrl.value = res.data
		console.log("banner数据获取")
	}
	getIndexBanner()
	
	//暴露出组件变量、函数等
	defineExpose({
		getIndexBanner
	})
</script>

<style lang="scss" scoped>
	.banner {
		padding: 0 25rpx;
		height: 340rpx;

		.wrapper {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
			width: 700rpx;
			overflow: hidden;

			.bannerItem {
				height: 100%;
				border-radius: 15rpx;

				.bannerImg {
					width: 100%;
					height: 100%;
				}

			}
		}

	}
</style>